<template>
  <div class="main">
    <!-- 左边侧边栏 -->
    <div class="left">
      <postAside @asideSend='asideSend'></postAside>
      <div class="recom-city">
        <p>推荐城市</p>
        <div class="underline"></div>
        <img
          src="http://157.122.54.189:9093/images/pic_sea.jpeg"
          alt=""
        >
      </div>
    </div>

    <div class="right">
      <!-- 搜索框 -->
      <input
        placeholder="请输入想去的地方，比如：“广州”"
        v-model="searchValue"
      >
      <div
        class="icon_search el-icon-search"
        @click="searchCity"
      ></div>
      <!-- 搜索历史 -->
      <div class="search_history">
        <span>推荐:</span>
        <span
          v-for="(item,index) in city"
          :key="index"
          @click="historySearch(item)"
          class="historySearch"
        >{{item}}</span>
      </div>
      <!-- 推荐攻略 -->
      <div class="strategy">
        <div class="head">
          <span>推荐攻略</span>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="$router.push({path:'/post/create'})"
          >写游记</el-button>
        </div>
        <div class="wire"></div>
        <postItem
          v-for="(item,index) in newList"
          :key="index"
          :data='item'
        ></postItem>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[3, 5, 7, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="postList.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {posts} from '@/api/post.js'
import postAside from '@/components/post/postAside.vue'
import postItem from '@/components/post/postItem.vue'
export default {
  data() {
    return {
      city: ["广州", "上海", "北京"], //推荐城市
      postData: {},                 
      searchValue: "",              //搜索内容
      postList: [],
      pageIndex: 1,
      pageSize: 3,
    }
  },
  components: {
    postAside,
    postItem
  },
  computed: {
    newList() {
      if (!this.postList) {
        return [];
      }
      const end = this.pageIndex * this.pageSize;
      const begin = end - this.pageSize;
      return this.postList.slice(begin, end);
    },
  },
  methods: {
    asideSend(val){
      this.searchValue = val
      this.init()
    },
    historySearch(val){
      this.searchValue = val
      this.init()
    },
    async searchCity(){
      this.init(this.searchValue)
    },
    show(){
      console.log('光标进入');
      this.isshow = true
    },
    hide(){
      console.log('光标移出');
      this.isshow = false
    },
    handleSizeChange(val){
      this.pageSize = val
    },
    handleCurrentChange(val){
      this.pageIndex = val
    },
    async init(val){
      let res = await posts(val)
      console.log(res);
      if (res){
        this.postData = res
        this.postList = res.data.data
      }
      this.pageIndex = 1
    }
  },
  async created () {
    if (this.$route.query.cityName){
      this.searchValue = this.$route.query.cityName
      this.init(this.searchValue)
      return
    }
    this.init()
  }
}

</script>

<style lang="less" scoped>
/deep/ .el-pagination {
  margin: 20px;
}
.main {
  width: 1000px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: 20px auto;

  .left {
    width: 260px;

    .recom-city {
      p {
        margin: 20px 0 10px;
      }
      .underline {
        border-top: 1px solid #dddddd;
        margin-bottom: 8px;
      }
      img {
        width: 100%;
      }
    }
  }

  .right {
    position: relative;
    width: 700px;

    input {
      width: 655px;
      height: 40px;
      padding: 0 20px;
      border: 3px solid #ffa500;
      border-radius: 0;
      outline: none;
    }
    .icon_search {
      color: #ffa500;
      position: absolute;
      top: 11px;
      right: 10px;
      font-size: 24px;
      font-weight: 700;
      cursor: pointer;
    }

    .search_history {
      margin-top: 12px;
      font-size: 10px;
      color: #666666;
      span {
        margin-right: 8px;
      }
      .historySearch {
        cursor: pointer;
        &:hover {
          color: #ffa500;
        }
      }
    }

    .strategy {
      .head {
        padding: 10px 0;
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          color: #ffa500;
          height: 100%;
          line-height: 42px;
          font-size: 18px;
          border-bottom: 3px solid #ffa500;
        }
      }
      .wire {
        margin-top: -8px;
        border-bottom: 1px solid #ccc;
      }
    }
  }
}

</style>